class Enlarge 
{
    constructor(el, options = {})
    {
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.init()
    }

    init() {
        this.overOut()
        this.maskMove()
        // this.tbEnlarge()
    }

    overOut() {
        this.imgObj.onmouseover = () =>  this.maskObj.style.display = this.enlargeObj.style.display  = 'block'
        this.imgObj.onmouseout = () =>  this.maskObj.style.display = this.enlargeObj.style.display  = 'none'
    }

    maskMove() {
        this.imgObj.onmousemove = (evt) => {
            let e = evt || window.event
            let x = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth / 2
            let y = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight / 2

            if (x<0) x=0
            if (y<0) y=0
            let maxLeft = this.el.clientWidth - this.maskObj.offsetWidth
            let maxTop = this.el.clientHeight - this.maskObj.offsetHeight
            if (x>maxLeft) x=maxLeft
            if (y>maxTop) y=maxTop

            this.maskObj.style.left = x + 'px'
            this.maskObj.style.top = y + 'px'
            this.tbEnlarge(x, y)
        }
    }

    tbEnlarge(x,y) {
        this.enlargeObj.style.backgroundPosition = `-${x*2}px -${y*2}px`
    }
}


export default Enlarge